<template>
  <div v-show="value">
    <Card>
      <p slot="title">
        <Breadcrumb separator=">">
          <Breadcrumb-item href="/User">个人中心</Breadcrumb-item>
          <Breadcrumb-item>申请评级</Breadcrumb-item>
        </Breadcrumb>
      </p>
      <!-- <div style="width:80%; margin: 2rem auto;color:#00b04e">
        <Steps :current="0">
          <Step title="提交资料" content=""></Step>
          <Step title="审核中" content=""></Step>
          <Step title="认证成功" content=""></Step>
        </Steps>
      </div> -->
      <Row class="content">

        <div v-if="userInfo.evaluationState === 0" class="center"> <img src="../assets/level_start.png" style="width:100px;height:100px" /></div>
        <div v-else-if="userInfo.evaluationState === 1" class="center"> <img src="../assets/level_unsubmit.png" style="width:100px;height:100px" /></div>
        <div v-else-if="userInfo.evaluationState === 2" class="center"> <img src="../assets/level_submited.png" style="width:100px;height:100px" /></div>
        <div v-else-if="userInfo.evaluationState === 3" class="center"> <img src="../assets/level_submited.png" style="width:100px;height:100px" /></div>
        <div v-else-if="userInfo.evaluationState === 4" class="center"> <img src="../assets/level_submited.png" style="width:100px;height:100px" /></div>
        <div v-else-if="userInfo.evaluationState === 5" class="center"> <img src="../assets/level_test_fail.png" style="width:100px;height:100px" /></div>
        <div v-else-if="userInfo.evaluationState === 6" class="center"> <img src="../assets/level_test_success.png" style="width:100px;height:100px" /></div>

        <div :class="userInfo.evaluationState === 3?'center fail':'center'"> {{evaluationStateDes}}</div>
        <div class="center"> <Button v-if="isShowReEval" style="margin-right:20px;" type="default" @click="validate">重新测评</Button>
          <Button v-if="isShowEval" type="success" @click="validate">{{evaluationStateButtonDes}} </Button>
          <Button v-if="isShowSeeAnswers" type="default" @click="seeAnswers">查看问卷 </Button>
        </div>
        <div class="center">
          <span v-if="evaluatorState.evaluation_state === 1"> 问卷自评（{{evaluatorState.selfEvaluationMark}}分）</span>
          <span> 现场自评（{{evaluatorState.evaluationMark}}分） </span>
          <span> 总分（{{evaluatorState.actualMark}}分） </span>
        </div>
      </Row>
    </Card>

    <Modal v-model="showSelectLevel" title="请选择申请等级" class-name="vertical-center-modal" width="300" @on-ok="ok" @on-cancel="cancel">
      <Button v-for="item in levelList" :key="item.key" :value="item.key" :class="(item.key===selectedLevel?'selected ':'')+'options'" type="default" @click="choiceLevel(item.key)">{{item.label}}</Button>
    </Modal>
  </div>
</template>

<script>
// @ is an alias to /src

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class LevelValidate extends Vue {
  @Prop({ type: Boolean, default: false }) value
  evaluationStateDes = ''
  evaluationStateButtonDes = ''
  showEvalBtn = false
  showSelectLevel = false
  isShowReEval = false
  isShowEval = false
  isShowSeeAnswers = false
  selectedLevel = 0
  levelList = [{ key: '1', label: '一级机构' }, { key: '2', label: '二级机构' }, { key: '3', label: '三级机构' }, { key: '4', label: '四级机构' }, { key: '5', label: '五级机构' }]

  get userInfo() {
    return this.$store.getters['session/user']
  }

  get evaluatorState() {
    const evaluatorStates = this.$store.state.session.evaluatorStates || {}
    console.log('this.$store.state.session.evaluatorStates', this.$store.state.session.evaluatorStates)
    return evaluatorStates
  }

  choiceLevel(key) {
    // dd
    this.selectedLevel = key
  }

  validate() {
    if (this.evaluatorState.evaluation_state === 1 && this.evaluatorState.evaluationLevel > 0) {
      const evaluationLevel = this.evaluatorState.evaluationLevel
      this.$router.push('/LevelTest?level=' + evaluationLevel)
    } else {
      this.showSelectLevel = true
    }
  }

  seeAnswers() {
    const evaluationLevel = this.evaluatorState.evaluationLevel
    this.$router.push('/LevelTest?level=' + evaluationLevel)
  }

  ok() {
    if (this.selectedLevel > 0) {
      this.showSelectLevel = false
      this.$router.push('/LevelTest?level=' + this.selectedLevel)
    } else {
      this.$Message.warning('请选择要评测的评定标准')
    }
  }

  cancel() {
    this.showSelectLevel = false
  }

  created() {
    //
    console.log('this.evaluatorState.evaluation_state', this.evaluatorState.evaluation_state)
    const needAnswer = this.evaluatorState.needAnswer === 0
    if (needAnswer) {
      switch (this.evaluatorState.evaluation_state) {
        case 0:
          this.evaluationStateDes = '机构尚未测评'
          this.evaluationStateButtonDes = '申请测评'
          this.isShowEval = true
          break
        case 1:
          this.evaluationStateDes = '待完善评测问卷'
          this.evaluationStateButtonDes = '继续答题'
          this.isShowEval = true
          break
        case 2:
          this.evaluationStateDes = '待指派测评机构'
          this.isShowEval = false
          break
        case 3:
          this.evaluationStateDes = '等待现场测评'
          this.isShowEval = false
          break
        case 4:
          this.evaluationStateDes = '测评完成等待终审'
          this.isShowEval = false
          break
        case 5:
          this.evaluationStateDes = '很抱歉，您的养老机构未达到评级标准，请整改后重新提交测评问卷'
          this.isShowReEval = true
          break
        case 6:
          this.evaluationStateDes = '恭喜你，您被评定为XXXX级养老机构'
          // this.evaluationStateButtonDes = '查看问卷'
          break
      }
    } else {
      switch (this.evaluatorState.evaluation_state) {
        case 0:
          this.evaluationStateDes = '机构尚未测评'
          this.evaluationStateButtonDes = '申请测评'
          this.isShowEval = true
          break
        case 1:
          this.evaluationStateDes = '待完善评测问卷'
          this.evaluationStateButtonDes = '继续答题'
          this.isShowEval = true
          break
        case 2:
          this.evaluationStateDes = '待指派测评机构'
          this.isShowSeeAnswers = true
          break
        case 3:
          this.evaluationStateDes = '等待现场测评'
          this.isShowSeeAnswers = true
          break
        case 4:
          this.evaluationStateDes = '测评完成等待终审'
          this.isShowSeeAnswers = true
          break
        case 5:
          this.evaluationStateDes = '很抱歉，您不符合评定标准，请整改后重新提交测评问卷'
          this.isShowSeeAnswers = true
          this.isShowReEval = true
          break
        case 6:
          this.evaluationStateDes = '恭喜你，通过系统测评，请耐心等待现场测评人员与您取得联系'
          this.isShowSeeAnswers = true
          break
      }
    }
  }
}
</script>
<style lang='less' scoped>
.selected {
  border: solid 1px #00b04e;
  color: #00b04e;
}
.content {
  margin: 10rem;
}
.center {
  margin: 1rem;
  text-align: center;
}
.options {
  /* display: block; */
  width: 80%;
  margin: 1rem 10%;
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
